<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap-3.3.7-dist\css\bootstrap.min.css" rel="stylesheet">
    <style>
        .one{
            width: 97%;
            margin: 0 auto;
        }
        .two{
            font-weight: bold;
            border: none;
            background: white;
            font-size: 18px;
        }
        .three{
            border: 1px solid #DCDCDC;
            border-radius: 5%;
            width: 350px;
            height: 30px;
            color: #B39999;
            font-weight: normal;
        }
        [type="file"]{
            float: right;
            margin-left: 4px;
        }
        .four{
            color: #7B7E7E;
            margin-left: 68px;
        }
        form{
            margin-left: 200px;
        }
        #d1{
            margin-left: 200px;
            margin-top: 50px;
        }
        #d2{
            float: right;
            margin-right: 700px;
        }
        .five{
            margin-top: 5px;
        }
        .six{
            float: right;
            margin-top: 10px;
            margin-right: 16px;
        }
    </style>
</head>
<body>
<div class="container">
    <!--页头-->
    <div class="page-header">
      <h1>信息收集卡</h1>
    </div>
    <!--进度条-->
    <div class="progress one">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 33%;">
        1/3
      </div>
    </div>
    <br>
    <!--面板-->
    <div class="panel panel-primary one">
      <div class="panel-heading">
        <h3 class="panel-title">基本信息</h3>
      </div>
      <div class="panel-body">
    <!--      表单-->
          <form>
              <div>
                  <label>
                    <span class="two">姓名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" class="three" placeholder="&nbsp;&nbsp;&nbsp;姓名">
                  </label>
              </div>
              <div>
                  <label>
                    <span class="two">手机&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" class="three" placeholder="&nbsp;&nbsp;&nbsp;手机">
                  </label>
              </div>
              <div>
                  <label>
                    <span class="two">邮箱&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" class="three" placeholder="&nbsp;&nbsp;&nbsp;邮箱">
                  </label>
              </div>
              <div>
                  <label>
                    <span class="two">密码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input type="text" class="three" placeholder="&nbsp;&nbsp;&nbsp;密码">
                  </label>
              </div>
              <div>
                  <label>
                    <span class="two">头像&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <input type="file">
                  </label>
                  <div class="four">只支持png、jpg、gif格式。</div>
              </div>
          </form>
    <!--      第二个框-->
          <div id="d1">
              <span class="two">属性</span>
              <div id="d2">
                  <div><input type="radio">&nbsp;&nbsp;我是一个好人</div>
                  <div class="five"><input type="radio">&nbsp;&nbsp;我是一个坏人</div>
                  <div class="five"><input type="radio">&nbsp;&nbsp;我真不是个人</div>
              </div>
          </div>
      </div>
    </div>
    <!--按钮-->
    <a href="\python 笔记\作业\html作业\12 周末大作业-19-9-21\页面二\index.html" target="_blank"><button type="button" class="btn btn-success six">下一步</button></a>
</div>

<script src="jquery.js"></script>
<script src="bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
<script>

</script>
</body>
</html>